<script setup>
import { ref, onMounted } from 'vue';
import { queryAllApi, addDeptApi, getDeptById,updateDept,deleteDept } from '@/api/dept'
import { ElMessage,ElMessageBox} from 'element-plus'

//声明列表展示数据
let deptList = ref([])
//动态加载数据-查询部门
const queryAll = async () => {
  const result = await queryAllApi()
  deptList.value = result.data
}

//钩子函数
onMounted(() => {
  queryAll()
})

// 编辑部门 - 根据ID查询回显数据
const handleEdit = async (id) => {
  
  dialogTitle.value = '编辑部门'
  //弹出框
  dialogVisible.value = true
  //回显部门名称
  const result = await getDeptById(id)
  deptForm.value = result.data
};

// 删除部门 - 根据ID删除部门
const handleDelete = async(id) => {
  // 在这里实现删除功能
  ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 删除部门
    const result = await deleteDept(id)
    if(result.code){
      ElMessage.success('删除成功')
      queryAll()
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
};

//新增部门对话框相关
const dialogTitle = ref('')
const dialogVisible = ref(false)
const deptFormRef = ref()
const deptForm = ref({
  name: ''
})
const rules = {
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度为2-10位', trigger: 'blur' }
  ]
}

//打开新增部门对话框
const handleAdd = () => {
  dialogVisible.value = true
  // 重置表单
  deptForm.value = { name: '' }
  // 重置表单验证
  if (deptFormRef.value) {
    deptFormRef.value.resetFields()
  }
}

//保存部门
const saveDept = async () => {
  dialogTitle.value = '新增部门'
  // 表单验证
  await deptFormRef.value.validate()
let result =null;
   //判断有没有id，决定是否是编辑，有id就修改，没有id就新增
   if (deptForm.value.id) {
    result =await updateDept(deptForm.value)
  }else{
    result =await addDeptApi(deptForm.value)
  }
  if (result.code == 1) {
    // 关闭对话框
    dialogVisible.value = false
    // 提示成功
    ElMessage.success('操作成功')
    // 保存成功
    // 重新加载部门列表
    queryAll()
  } else {
    // 提示失败
    ElMessage.error(result.msg)
  }

}
</script>

<template>
  <h1>部门管理</h1>
<br>

  <!-- 按钮靠页面右侧显示 -->
  <el-button type="primary" @click="handleAdd" style="float: left;"> + 新增部门</el-button> <br><br>

  <el-table :data="deptList" border style="width: 100%;">
    <el-table-column type="index" label="序号" width="100" align="center" />
    <el-table-column prop="name" label="部门名称" width="300" align="center" />
    <el-table-column prop="updateTime" label="最后修改时间" width="300" align="center" />
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增部门对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
    <el-form ref="deptFormRef" :model="deptForm" :rules="rules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" placeholder="请输入部门名称，长度为2-10位" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDept">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>